<template>
  <div class="admin-complete-test-container">
    <div class="test-card">
      <h2>🔐 管理员完整功能测试</h2>
      
      <div class="test-section">
        <h3>测试说明</h3>
        <el-alert
          title="测试前准备"
          type="info"
          :closable="false"
          show-icon
        >
          <p>1. 确保数据库中存在管理员表和数据</p>
          <p>2. 默认管理员账号: admin / admin123</p>
          <p>3. 测试将验证完整的管理员登录流程</p>
        </el-alert>
      </div>

      <div class="test-section">
        <h3>1. 数据库连接测试</h3>
        <p>测试数据库连接和管理员表是否存在</p>
        <el-button @click="testDatabaseConnection" type="primary">测试数据库</el-button>
        <p class="result">{{ results.database }}</p>
      </div>

      <div class="test-section">
        <h3>2. 管理员登录完整流程</h3>
        <p>测试从登录到权限验证的完整流程</p>
        <el-form :model="adminForm" label-width="100px" style="max-width: 400px;">
          <el-form-item label="管理员账号">
            <el-input v-model="adminForm.username" placeholder="请输入管理员账号" />
          </el-form-item>
          <el-form-item label="管理员密码">
            <el-input v-model="adminForm.password" type="password" placeholder="请输入管理员密码" />
          </el-form-item>
          <el-form-item>
            <el-button @click="testCompleteLogin" :loading="loading.login" type="primary">
              完整登录测试
            </el-button>
          </el-form-item>
        </el-form>
        <p class="result">{{ results.login }}</p>
      </div>

      <div class="test-section">
        <h3>3. 管理员权限API测试</h3>
        <p>测试管理员专用API接口</p>
        <el-button @click="testAdminAPIs" type="success">测试管理员APIs</el-button>
        <p class="result">{{ results.apis }}</p>
      </div>

      <div class="test-section">
        <h3>4. 页面访问权限测试</h3>
        <p>测试管理员页面访问权限</p>
        <el-button @click="testPageAccess" type="info">测试页面权限</el-button>
        <p class="result">{{ results.pageAccess }}</p>
      </div>

      <div class="test-section">
        <h3>5. 登出和清理测试</h3>
        <p>测试登出功能和数据清理</p>
        <el-button @click="testLogoutAndCleanup" type="warning">测试登出</el-button>
        <p class="result">{{ results.logout }}</p>
      </div>

      <div class="test-section">
        <h3>6. 快速操作</h3>
        <p>快速跳转到相关页面</p>
        <el-button @click="goToAdminLogin" type="primary">管理员登录页</el-button>
        <el-button @click="goToAdminDashboard" type="success">管理员仪表盘</el-button>
        <el-button @click="goToUserLogin" type="info">用户登录页</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { adminLogin } from '@/utils/apiService'
import { 
  saveAdminToken, 
  getAdminToken, 
  saveAdminInfo, 
  getAdminInfo, 
  isAdminLoggedIn, 
  adminLogout,
  hasPermission 
} from '@/utils/auth'
import api from '@/utils/api'

const router = useRouter()

// 加载状态
const loading = reactive({
  login: false
})

// 测试结果
const results = reactive({
  database: '',
  login: '',
  apis: '',
  pageAccess: '',
  logout: ''
})

// 管理员表单
const adminForm = reactive({
  username: 'admin',
  password: 'admin123'
})

// 1. 测试数据库连接
const testDatabaseConnection = async () => {
  try {
    // 尝试调用一个简单的API来测试数据库连接
    const response = await api.get('/admin/agent/list', {
      headers: {
        'info': 'test-token'
      }
    })
    
    // 如果返回401说明数据库连接正常，只是token无效
    if (response.status === 401 || response.data.code === 1001) {
      results.database = `✅ 数据库连接正常，管理员API端点可访问`
    } else {
      results.database = `✅ 数据库连接正常，API响应: ${response.data.message}`
    }
    ElMessage.success('数据库连接测试完成')
  } catch (error) {
    if (error.response?.status === 401) {
      results.database = `✅ 数据库连接正常，管理员API端点可访问（401未授权是预期的）`
      ElMessage.success('数据库连接正常')
    } else {
      results.database = `❌ 数据库连接失败: ${error.message}`
      ElMessage.error('数据库连接失败')
    }
  }
}

// 2. 完整登录测试
const testCompleteLogin = async () => {
  loading.login = true
  let testResults = []
  
  try {
    // 步骤1: 清除之前的登录状态
    await adminLogout()
    testResults.push('✅ 清除之前登录状态')
    
    // 步骤2: 执行登录
    const response = await adminLogin({
      username: adminForm.username,
      password: adminForm.password
    })
    
    if (response.data.code === "200" || response.data.code === 200) {
      testResults.push('✅ 登录API调用成功')
      
      // 步骤3: 保存token和信息
      if (response.data.data.info) {
        saveAdminToken(response.data.data.info)
        testResults.push('✅ Token保存成功')
      }
      
      if (response.data.data.loginAdmin) {
        saveAdminInfo(response.data.data.loginAdmin)
        testResults.push('✅ 管理员信息保存成功')
      }
      
      // 步骤4: 验证登录状态
      const isLoggedIn = isAdminLoggedIn()
      if (isLoggedIn) {
        testResults.push('✅ 登录状态验证成功')
      } else {
        testResults.push('❌ 登录状态验证失败')
      }
      
      // 步骤5: 验证权限
      const hasAdminPerm = hasPermission('admin')
      if (hasAdminPerm) {
        testResults.push('✅ 管理员权限验证成功')
      } else {
        testResults.push('❌ 管理员权限验证失败')
      }
      
      results.login = testResults.join('\n')
      ElMessage.success('完整登录测试成功')
    } else {
      testResults.push(`❌ 登录失败: ${response.data.message}`)
      results.login = testResults.join('\n')
      ElMessage.error('登录失败')
    }
  } catch (error) {
    testResults.push(`❌ 登录异常: ${error.response?.data?.message || error.message}`)
    results.login = testResults.join('\n')
    ElMessage.error('登录测试异常')
  } finally {
    loading.login = false
  }
}

// 3. 测试管理员APIs
const testAdminAPIs = async () => {
  const token = getAdminToken()
  if (!token) {
    results.apis = '❌ 请先完成登录测试'
    ElMessage.warning('请先完成登录测试')
    return
  }
  
  let apiResults = []
  
  try {
    // 测试中介申请列表API
    const agentListResponse = await api.get('/admin/agent/list', {
      headers: { 'info': token }
    })
    if (agentListResponse.data.code === "200" || agentListResponse.data.code === 200) {
      apiResults.push(`✅ 中介申请列表API: 获取到 ${agentListResponse.data.data?.length || 0} 条记录`)
    } else {
      apiResults.push(`❌ 中介申请列表API失败: ${agentListResponse.data.message}`)
    }
  } catch (error) {
    apiResults.push(`❌ 中介申请列表API异常: ${error.response?.data?.message || error.message}`)
  }
  
  // 可以添加更多API测试...
  
  results.apis = apiResults.join('\n')
  ElMessage.success('管理员API测试完成')
}

// 4. 测试页面访问权限
const testPageAccess = () => {
  const isLoggedIn = isAdminLoggedIn()
  const hasAdminPerm = hasPermission('admin')
  
  let pageResults = []
  
  if (isLoggedIn) {
    pageResults.push('✅ 管理员已登录，可以访问管理员页面')
  } else {
    pageResults.push('❌ 管理员未登录，无法访问管理员页面')
  }
  
  if (hasAdminPerm) {
    pageResults.push('✅ 具有管理员权限')
  } else {
    pageResults.push('❌ 缺少管理员权限')
  }
  
  // 测试路由守卫（模拟）
  pageResults.push('📋 可访问的管理员页面:')
  pageResults.push('  - /admin/dashboard (管理员仪表盘)')
  pageResults.push('  - /admin/agent (中介管理)')
  pageResults.push('  - /admin/house-verification (房源审核)')
  pageResults.push('  - /admin/user (用户管理)')
  
  results.pageAccess = pageResults.join('\n')
  ElMessage.success('页面权限测试完成')
}

// 5. 登出和清理测试
const testLogoutAndCleanup = async () => {
  let logoutResults = []
  
  try {
    // 检查登录状态
    const wasLoggedIn = isAdminLoggedIn()
    logoutResults.push(`登出前状态: ${wasLoggedIn ? '已登录' : '未登录'}`)
    
    // 执行登出
    await adminLogout()
    logoutResults.push('✅ 登出API调用成功')
    
    // 验证清理结果
    const token = getAdminToken()
    const adminInfo = getAdminInfo()
    const isLoggedIn = isAdminLoggedIn()
    
    if (!token && !adminInfo && !isLoggedIn) {
      logoutResults.push('✅ 本地存储清理完成')
    } else {
      logoutResults.push('❌ 本地存储清理不完整')
    }
    
    results.logout = logoutResults.join('\n')
    ElMessage.success('登出测试完成')
  } catch (error) {
    logoutResults.push(`❌ 登出异常: ${error.message}`)
    results.logout = logoutResults.join('\n')
    ElMessage.error('登出测试失败')
  }
}

// 页面跳转
const goToAdminLogin = () => {
  router.push('/admin-login')
}

const goToAdminDashboard = () => {
  router.push('/admin/dashboard')
}

const goToUserLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.admin-complete-test-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.test-card h2 {
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  background: #f8f9fa;
}

.test-section h3 {
  margin-top: 0;
  color: #34495e;
  margin-bottom: 15px;
}

.test-section p {
  color: #7f8c8d;
  margin-bottom: 15px;
}

.result {
  margin-top: 15px;
  padding: 15px;
  background: #ffffff;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  border-left: 4px solid #3498db;
  max-height: 300px;
  overflow-y: auto;
}

.el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.el-alert {
  margin-bottom: 20px;
}
</style>
